<template>
    <div class="chart-wrapper">
        <h3 class="chart-title">历年豆类、薯类粮食产量排名</h3>
        <div ref="myEcharts" class="chart"></div>
    </div>
</template>
<script setup>
    import * as echarts from 'echarts'
    import { ref,onMounted,reactive } from 'vue';
    import axios from 'axios';
    let options = reactive([])
    const myEcharts = ref();
    function echartsInit(){
        const mc = echarts.init(myEcharts.value,"light",{
            width: 600,
            height: 800
        })
        var option = { 
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                textStyle:{
                    color: 'white',
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: []
            },
            series: [
                {
                name: '豆类',
                type: 'bar',
                data: []
                },
                {
                name: '薯类',
                type: 'bar',
                data: []
                }
            ]
        }; 
        const xdata = reactive([]) 
        const ydata = reactive([]) 
        const zdata = reactive([])
        for(let index=0;index<options.length;index++){
            let obj = options[index];
            xdata.push(obj.year);
            ydata.push(obj.legumesyield);
            zdata.push(obj.potatoproduction)
        }
        option.yAxis.data = xdata
        option.series[0].data = ydata
        option.series[1].data = zdata
        console.log(ydata);
        mc.setOption(option);
    }
    function getData(){
        axios.get('/api/queryNagrProp')
            .then((response)=>{
                console.log(response.data)
                if(response.data.code==200){
                    console.log(response.data.data)
                    options = response.data.data;
                    echartsInit();
                }
            })
    }
    onMounted(()=>{
        getData();
    })
     
</script>
<style lang="css">
.chart-wrapper {
    width: 100%;
    height: 100%;
    padding: 10px;
    background: transparent;
}

.chart-title {
    color: #fff;
    margin: 0;
    font-size: 20px;
    margin-bottom: 10px;
    text-align: left;
    padding-left: 20px;
}

.chart {
    position: relative;
    bottom: 10px;
    left: 20px;  /* 减小左边距 */
}
</style>
